<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				background-color: #ccc;
			}
			#img-warp{
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				font-size: 50px;
			}
			#img-warp img{
				width: 150px;
				height: 150px;
				border-radius: 50%;
				margin: 10px;
				border: 2px solid #fff;
			}
		</style>
	</head>
	<body>
		<!-- 按钮绑定事件 -->
		<button id="btn">随机获取小狗图片</button>
		<div id="img-warp"></div>
		<!-- axios基于promise的HTTP -->
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.js"></script>
		<script>
			// axios现在主流的ajax请求库，都是promise（ES6）实现
			// 1、先找到id=btn的元素
			let btnEle =document.getElementById('btn');
			let imgWarpEle =document.getElementById('img-warp');
			// 2、给其绑定单机事件
			btnEle.addEventListener("click", async function (){
				// 给loading加载提示
				imgWarpEle.innerText="数据玩命加载中..."
				// 3、发生ajax请求获取接口数据
				let { data } = await axios.get(
				"https://dog.ceo/api/breeds/image/random/20"
				);
				// 4、将数据组装成img标签渲染到页面中
				let imgStr = "";
				data.message.forEach((src) =>{
					imgStr +=`<img src=${src}>`
				});
				
				// 5、讲组装好的img标签设置到页面中显示
				imgWarpEle.innerHTML=imgStr;
			});
		</script>
	</body>
</html>